/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view class="container">
		<view class="type-navbar">
			<view class="type-box">
				<view @tap="changeTab" class="type-navbar-item" :class="[typeActive==0?'type-item-on':'']" data-id="0"> 未使用 </view>
			</view>
			<view class="type-box">
				<view @tap="changeTab" class="type-navbar-item" :class="[typeActive==1?'type-item-on':'']" data-id="1"> 已使用 </view>
			</view>
			<view class="type-box">
				<view @tap="changeTab" class="type-navbar-item" :class="[typeActive==2?'type-item-on':'']" data-id="2"> 已过期 </view>
			</view>
		</view>
		<view class="coupon-list" v-if="coupon">
			<view class="coupon-box" v-for="(item,index) in coupon" :key="index">
				<view class="coupon-head" :class="[typeActive!=0?'head-disable':'']">
					<view class="coupon-money">
						￥
						<text class="money">
							{{item.money.toFixed(2)}}
						</text>
					</view>
					<view class="line">【满{{item.condition.toFixed(2)}}使用】</view>
					<view class="line">有效期至{{item.dead_time_format}}</view>
				</view>
				<view class="coupon-body">
					<view class="line">
						<view class="left">名称：</view>
						<view class="right">{{item.name}}</view>
					</view>
					<view class="line">
						<view class="left">限店铺：</view>
						<view class="right">{{item.limit_store}}</view>
					</view>
					<view class="line bottom">
						<view class="left">券编号：</view>
						<view class="right">{{item.coupon_list_id}}</view>
					</view>
					<navigator class="use-btn" :class="[typeActive!=0?'btn-disable':'']" open-type="navigate" :url="typeActive==0?'/pages/store/index/index?store_id='+item.store_id:''||item.store_id==0?'/pages/index/index':''" role="navigation">
						{{typeActive==1?'已使用':(typeActive==2?'已过期':'立即使用')}}   
					</navigator>
				</view>
			</view>
			<!-- 已过期 -->
			<!-- <view class="coupon-box ">
				<view class="coupon-head head-disable">
					<view class="coupon-money">
						￥
						<text class="money">
							5.00
						</text>
					</view>
					<view class="line">【满10.00使用】</view>
					<view class="line">有效期至2020-02-11</view>
				</view>
				<view class="coupon-body">
					<view class="line">
						<view class="left">名称：</view>
						<view class="right">测试111</view>
					</view>
					<view class="line">
						<view class="left">限店铺：</view>
						<view class="right">邮汇·派</view>
					</view>
					<view class="line bottom">
						<view class="left">券编号：</view>
						<view class="right">2249</view>
					</view>
					<navigator class="use-btn btn-disable" open-type="navigate" url="/pages/store/index/index?store_id=2" role="navigation">立即使用</navigator>
				</view>
			</view> -->
		</view>
		<!-- 没有数据 -->
		<view class="no-data" v-if="!coupon.length>0">
			<image :src="imgUrl+'cart/cart-null.png'" class="cart-image"/>
			<view class="no-data-title">没有找到相关的数据</view>
			<navigator url="/pages/index/index" class="lookat" open-type="switchTab"> 去逛逛 </navigator>
		</view>
	</view>
</template>

<script>
	import {getUserCouponList} from "@/api/api.js";
	import common from "@/common/common.js";
	import {mapState} from "vuex";
	export default {
		data() {
			return {
				imgUrl:config.imgUrl,
				coupon:"",//优惠劵
				typeActive:0,//
				total:0,//条数
				params:{
					"type":0,
					"size":12
				}
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad(option){
			this.getUserCouponList(this.params)
		},
		onShow(){
			this.islogin()
			// this.a()
		},
		methods:{
			/*用户优惠劵*/
			getUserCouponList(params){
				getUserCouponList(params).then(res=>{
					this.coupon=res.records;
					this.total=res.toatl;
					console.log(res)
				})
			},
			onReachBottom(){//下拉加载数据
				
				if(this.coupon.length===this.total){
					common.toast("none","加载完了",2000)
					
					 return false;
				}
				this.params.size+=9;
				this.getUserCouponList(this.params)
			},
			islogin(){
				/*重新获取登录状态*/
				if(this.hasLogin){
				
					this.getUserCouponList(this.params)
				}else{
					common.islogin()
				}
			},
			changeTab(e){
				this.typeActive=e.currentTarget.dataset.id;
				this.params.type=e.currentTarget.dataset.id;
				this.getUserCouponList(this.params)
				
			}
		}
	}
</script>

<style lang="scss">
	.type-navbar {
		white-space: nowrap;
		display: flex;
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		color: #333;
	}

	.type-box {
		width: 33.3333333333%;
		box-sizing: border-box;
		font-size: 28rpx;
		line-height: 76rpx;
		padding: 0 20rpx;
		text-align: center;
		display: inline-block;
		overflow: hidden;
	}

	.type-navbar-item {
		border-bottom: 4rpx solid #fff;
	}

	.type-item-on {
		border-bottom: 4rpx solid #ff3b3b;
		color: #ff3b3b;
	}

	.coupon-box {
		box-sizing: border-box;
		width: 365rpx;
		float: left;
		padding: 20rpx 0rpx 0 20rpx;
		font-size: 25rpx;
		height: 522rpx;
	}

	.coupon-head {
		background-color: #ff3b3b;
		color: white;
		height: 252rpx;
		box-sizing: border-box;
		padding: 70rpx 20rpx 20rpx 20rpx;
		border-bottom: 2px solid transparent;
		border-image: none 100% 0 5 repeat;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		text-align: center;
	}

	.coupon-money {
		margin-bottom: 16rpx;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.money {
		font-size: 48rpx;
	}

	.coupon-body {
		background-color: white;
		padding: 20rpx 20rpx 30rpx;
		color: #999999;
		border-bottom-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.use-btn {
		color: #ff3b3b;
		border: 2rpx #ff3b3b solid;
		width: 250rpx;
		padding: 6rpx 35rpx;
		border-radius: 35rpx;
		margin: 30rpx auto 0;
		box-sizing: border-box;
		text-align: center;
	}

	.use-end {
		padding: 25rpx 0;
		color: #999999;
		font-size: 28rpx;
	}

	.line {
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 40rpx;
		line-height: 40rpx;
	}

	.line .left {
		width: 110rpx;
		height: 100%;
		float: left;
	}

	.line .right {
		width: 160rpx;
		height: 100%;
		color: #333;
		float: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bottom {
		border-bottom: 1rpx solid #f3f3f3;
	}

	.head-disable {
		background-color: #999999;
	}

	.btn-disable {
		color: #999999;
		border-color: #999999;
	}
</style>
